<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>EC TextField</title>
    <style>
        body{
            margin:0;
        }
        .movieclip{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
        }
    </style>
</head>

<body>

<canvas id="canvas-text" class="movieclip"></canvas>

<!-- build:js scripts/libs/easyrender.js -->
<script src="scripts/Base.js"></script>
<script src="scripts/ES6-promise.pollyfill.js"></script>
<script src="scripts/Utils.js"></script>
<script src="scripts/Event.js"></script>
<script src="scripts/Loader.js"></script>
<script src="scripts/RequestAnimationFrame.js"></script>
<script src="scripts/Ticker.js"></script>
<script src="scripts/Timer.js"></script>
<script src="scripts/Easing.js"></script>
<script src="scripts/Tween.js"></script>
<script src="scripts/Renderer.js"></script>
<script src="scripts/MovieClip.js"></script>
<script src="scripts/TouchEvent.js"></script>
<script src="scripts/Stats.js"></script>
<!-- endbuild -->

<script>
    var canvas = document.getElementById('canvas-text');
    var stage = new EC.Stage(canvas, {
        scaleMode: EC.isTouch ? 'fixedWidth' : 'noScale',
        width: 750,
        height: 1334,
        showFps: true
    });

    stage.showFps({
        right: 0,
        left: "auto",
        top: 0
    });

    var text = new EC.TextField();
    text.width = 200;
    text.x = 10;
    text.y = 10;
    text.size = 14;
    text.multiple = true;
    text.text = "这是一段测试字符串。This is an test string.当在文本框输入内容后会同步显示到canvas上。";
    stage.addChild(text);

    var text2 = new EC.TextField();
    text2.width = 200;
    text2.x = 10;
    text2.y = 200;
    text2.textAlign = "center";
    text2.text = "文本居中";
    stage.addChild(text2);

    var text3 = new EC.TextField();
    text3.x = 10;
    text3.y = 250;
    text3.text = "斜杠n\n换行";
    stage.addChild(text3);

    var strokeText = new EC.TextField();
    strokeText.x = 10;
    strokeText.y = 350;
    strokeText.size = 34;
    strokeText.stroke = true;
    strokeText.strokeColor = "#f90";
    strokeText.fontFamily = 'Microsoft yahei';
    strokeText.text = "带描边的文字";
    stage.addChild(strokeText);

    var hollowText = new EC.TextField();
    hollowText.x = 10;
    hollowText.y = 400;
    hollowText.size = 34;
    hollowText.strokeOnly = true;
    hollowText.strokeColor = "#f90";
    hollowText.fontFamily = 'Microsoft yahei';
    hollowText.text = "空心的文字";
    stage.addChild(hollowText);

</script>
</body>
</html>